<template>
  <div class="playlists">
    <div class="wrap">
      <div class="background-img"
           :style="{'background-image':banner.coverImgUrl+'?param=280y280'}">
      </div>
      <div class="background-mask">
      </div>
      <div class="top-playlist-card">
        <div class="img-wrap">
          <img :src="banner.coverImgUrl+ '?param=280y280'"
               lazy='loaded'>
        </div>
        <div class="content">
          <div class="tag-wrap">
            <span>精品歌单</span>
          </div>
          <p class="name">{{banner.name}}</p>
          <p class="desc">{{banner.description}}</p>
        </div>
      </div>
    </div>
    <div class="filter">
      <span class="title">风格：</span>
      <ul class="tab-wrap">
        <li v-for="item,index in catlist"
            :key="index"
            :class="[item.name===cat?'tab-item action':'tab-item']"
            @click="changeMusicListCat(item.name)">
          {{item.name}}
        </li>
      </ul>
    </div>
    <div class="pagination">
      <el-pagination @current-change="handleCurrentChange"
                     :current-page.sync="currentPage"
                     :page-size="limit"
                     layout="total, prev, pager, next"
                     :total="total">
      </el-pagination>
    </div>
    <div class="playlist-cards">
      <listwarp v-for="item,index in playlists"
                :key="index"
                :data='item'
                :img='item.coverImgUrl'
                :desc="'播放量:'+item.playCount"
                :title='item.name'></listwarp>
    </div>
    <div class="pagination">
      <el-pagination @current-change="handleCurrentChange"
                     :current-page.sync="currentPage"
                     :page-size="limit"
                     layout="total, prev, pager, next"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import listwarp from '@/components/listwarp'
import { getSongListCatlist, getBannerInfo, getPlaylists } from '@/network/playlists'

export default {
  components: {
    listwarp
  },
  data () {
    return {
      // 所有分类
      catlist: [],
      // 当前选中分类
      cat: '全部',
      // 顶部banner信息
      banner: {},
      // 当前播放列表
      playlists: [],
      // 从第几条开始查询 比如当前是第1页 每页30个 则offset = 1*30 - 30 从第0个开始。如果是第2页 则 offset = 2*30 - 30 从第30个开始查询
      offset: 0,
      // 每页显示30个
      limit: 30,
      // 播放列表总数
      total: 0,
      // 当前所在页
      currentPage: 1
    }
  },
  created () {
    this.getBannerInfo()
    this.getSongListCatlist()
    this.getPlaylists()
  },
  methods: {
    // 获取所有分类
    getSongListCatlist () {
      getSongListCatlist().then(res => {
        if (!res || res.code !== 200) { return this.$message.error('请求失败!') }
        const arr = res.tags.splice(0, 10)
        arr.unshift({ name: '全部' })
        this.catlist = arr
      })
    },
    // 获取头部banner
    getBannerInfo () {
      getBannerInfo().then(res => {
        if (!res || res.code !== 200) { return this.$message.error('请求失败!') }
        this.banner = res.playlists[0]
      })
    },
    // 获取歌单列表
    getPlaylists () {
      this.currentPage = this.currentPage || 1
      this.offset = (this.currentPage - 1) * this.limit
      getPlaylists(this.limit, this.offset, this.cat).then(res => {
        if (!res || res.code !== 200) { return this.$message.error('请求失败!') }
        this.playlists = res.playlists
        this.total = res.total
      })
    },
    // 切换分类
    changeMusicListCat (name) {
      this.cat = name
      this.currentPage = 1
      this.getPlaylists()
    },
    // 下一页
    handleCurrentChange () {
      // TODO返回顶部
      this.getPlaylists()
    }
  }
}
</script>
 <style lang='less' scoped>
.playlists {
  .wrap {
    position: relative;
    height: 1.24451rem;
    .background-img {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      -webkit-filter: blur(0.10981rem);
      z-index: 0;
    }
    .background-mask {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 0;
    }
    .top-playlist-card {
      position: relative;
      width: 100%;
      padding: 0.11713rem;
      padding-right: 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .img-wrap {
        width: 1.02489rem;
        height: 1.02489rem;
        margin-right: 0.10981rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .content {
        flex-direction: column;
        justify-content: space-between;
        font-size: 0.102489rem;
        .tag-wrap {
          display: inline-block;
          padding: 0.029283rem 0.11713rem;
          margin-bottom: 0.11713rem;
          border: 1px solid #e7aa5a;
          border-radius: 0.036603rem;
          color: #e7aa5a;
        }
        .name {
          font-size: 0.11713rem;
          color: #fff;
          margin: 0 0 0.058565rem;
        }
        .desc {
          width: 6.58858rem;
          height: 0.439239rem;
          // margin-bottom: 0;
          // display: -webkit-box;
          // -webkit-line-clamp: 3;
          // -webkit-box-orient: vertical;
          overflow: hidden;
          color: hsla(0, 0, 100%, 0.5);
        }
      }
    }
  }
  .filter {
    display: flex;
    align-items: center;
    font-size: 0.087848rem;
    color: #7f7f81;
    .title {
      font-size: 0.102489rem;
      margin: 0 0.087848rem;
      padding: 0.087848rem 0;
      white-space: nowrap;
    }
    .tab-wrap {
      display: flex;
      padding: 0;
      justify-content: flex-end;
      margin-top: 0.10981rem;
      .tab-item {
        margin: 0 0.087848rem;
        padding: 0.087848rem 0;
        white-space: nowrap;
        cursor: pointer;
        &:hover {
          color: #f55050;
        }
      }
      .action {
        color: red;
      }
    }
  }

  .playlist-cards {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .pagination {
    // display: flex;
    // justify-content: flex-end;
    margin: 0 0.087848rem 0.087848rem;
    /deep/ .el-pagination .el-pager {
      .active {
        color: red;
      }
      li:hover {
        color: #f55050;
      }
    }
  }
}
</style>
